<template>
	<div class="home">
		<div class="div1">
			<img src="../../assets/img/login/logo1.png" />
			<aside class="aside1">
				<el-input v-model="text" placeholder="请输入内容"></el-input>
				<el-button type="danger" @click="Search()" icon="el-icon-search"></el-button>
			</aside>
			<aside class="aside2">
				<button @click="MyCart()"><i class="el-icon-shopping-cart-full"></i> 我的购物车</button>
			</aside>
		</div>
		<div class="div2">
			<div class="d1">
				<router-link to="/pc/classify">
					<h3>全部商品分类详情</h3>
				</router-link>
			</div>
			<div class="d2">
				<span>热销中</span>
			</div>
		</div>
		<hr />
		<div class="div3">
			<div class="classify">
				<ul v-for="(item,id) in fun">
					<li @click="findByBookId(item.id)">
						<span>{{item.name}}</span><i class="el-icon-arrow-right"></i>
						<div class="classify-box">
							<ul v-for="index in item.list">
								<li><span>{{index.name}}</span></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<div class="banner">
				<el-carousel :interval="5000" arrow="nerver" height="45vh">
					<el-carousel-item v-for="item in bannerlist" :key="item.id">
						<img :src="`${$ip}/api/public/showimg/${item.picture}`" />
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="hot">
				<div v-for="item in hotlist">
					<router-link :to="`/pc/pcbookdetail/${item.id}`">
						<aside class="aside1">
							<img :src="`${$ip}/api/public/showimg/${item.pic}`" />
							<p>{{item.name}}</p>
							<span>￥{{item.price}}</span>
						</aside>
					</router-link>
					<aside class="aside2">
						<p>{{item.maker}}</p>
						<button @click="add(item.id)">买</button>
					</aside>
				</div>
			</div>
		</div>
		<!-- 滚动公告 -->
		<div class="announ">
			<div class="icon">
				<i class="el-icon-bell"></i>
				<span>滚动公告</span>
			</div>
			<div class="text">
				<span>暑期热卖，本商城全部商品打折优惠！！！</span>
			</div>
		</div>
		<div class="div4">
			<div class="d2">
				<router-link to="/">
					<h3>为您推荐</h3>
				</router-link>
			</div>
		</div>
		<hr />
		<!-- 新书推荐 -->
		<div class="newlist">
			<ul>
				<li v-for="item in newlist">
					<router-link :to="`/pc/pcbookdetail/${item.id}`">
						<div class="img">
							<img :src="`${$ip}/api/public/showimg/${item.pic}`" />
						</div>
						<p>{{item.name}}</p>
						<aside>
							<p>￥{{item.price}}</p>
						</aside>
						<el-button type="danger" size="medium" plain>立即购买</el-button>
						<p></p>
					</router-link>
				</li>
			</ul>
		</div>
		<hr class="hr3" />
		<!-- 底部 -->
		<div class="footer">
			<ul>
				<li>
					<img src="../../assets/img/login/b1.png" />
					<h3>正品保障</h3>
					<p>正品行货 放心购买</p>
				</li>
				<li>
					<img src="../../assets/img/login/b2.png" />
					<h3>满38包邮</h3>
					<p>满38包邮 免运费</p>
				</li>
				<li>
					<img src="../../assets/img/login/b3.png" />
					<h3>天天低价</h3>
					<p>天天低价 畅享无忧</p>
				</li>
				<li>
					<img src="../../assets/img/login/b4.png" />
					<h3>准时到达</h3>
					<p>收货时间由你做主</p>
				</li>
			</ul>
		</div>
		<div class="upload" v-if="showBackToTop" @click="scrollToTop()">
			<i class="el-icon-upload2"></i>
			<span>顶部</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PcHome',
		data() {
			return {
				bannerlist: [],
				hotlist: [],
				type: [],
				value: [],
				newlist: [],
				list: [],
				text: '',
				showBackToTop: false, // 控制返回顶部按钮的显示隐藏  
			}
		},
		methods: {
			// 前往我的购物车
			MyCart() {
				this.$message.error('您未登录,请先登录!')
			},
			add(id) {
				if (this.$store.state.role != '') {
					this.$router.push({
						path: `/pc/pcbookdetail/${id}`
					})
				} else {
					this.$message.error('您未登录,请先登录!')
				}
			},
			Search() {
				this.$router.push({
					path: 'classify/',
					query: {
						key: this.text
					}
				});
			},
			findByBookId(id) {
				// 根据类型查找
				this.$router.push({
					path: 'classify/',
					query: {
						id: id
					}
				})
			},
			// 处理滚动事件  
			handleScroll() {
				// 判断滚动位置是否超过200（可根据需要调整）  
				this.showBackToTop = window.scrollY > 200;
			},
			// 返回顶部  
			scrollToTop() {
				// 平滑滚动到顶部  
				window.scrollTo({
					top: 0,
					behavior: 'smooth',
				});
			},
		},
		mounted() {
			// 轮播图/热门推荐
			this.$get("/api/public/findHot/1/5").then((resp) => {
				this.bannerlist = resp.data.data;
				console.log(this.bannerlist);
			})
			//销售最高的书籍
			this.$get("/api/public/book/findTopSale/4").then((resp) => {
				this.hotlist = resp.data.data;
				console.log(this.hotlist);
			})
			//书籍类型
			this.$get("/api/public/type/findAll2").then((resp) => {
				this.type = resp.data.data;
				console.log(this.type);
			})
			// 新书推荐
			this.$get("/api/public/findPageBook/1/30/0").then((resp) => {
					this.newlist = resp.data.data.books;
					console.log(this.newlist);
				}),
				// 监听滚动事件  
				window.addEventListener('scroll', this.handleScroll);
		},
		beforeDestroy() {
			// 移除滚动事件监听器，防止内存泄漏  
			window.removeEventListener('scroll', this.handleScroll);
		},
		computed: {
			fun() {
				this.type.forEach((item) => {
					if (item.pid == 0) { // this.type这个数据的对象等于类型编号0的时候把匹配的对象赋值给新数组value接收
						this.value.push({
							id: item.id,
							name: item.name,
							prio: item.prio
						})
					}
				})
				console.log(this.value);
				this.value.forEach((i) => {
					let types2 = [];
					this.type.forEach((item) => {
						if (item.pid == i.id && item.pid > 0) {
							types2.push({
								id: item.id,
								name: item.name,
								prio: item.prio
							})
						}
					})
					i.list = types2;
				})
				return this.value;
			}
		}
	}
</script>

<style scoped>
	a {
		color: white;
		margin: 0;
		padding: 0;
	}

	.home {
		width: 90vw;
		margin: 0 auto;
		background-color: #fafafa;
	}

	.home .div1 {
		width: 100%;
		margin: 0 auto;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.home .div1 img {
		width: 300px;
	}

	.home .div1 aside {
		margin-top: 20px;
	}

	.home .div1 .aside1 .el-input {
		width: 32vw;
		height: 20px;
	}

	.home .div1 .aside1 .el-button {
		width: 70px;
		height: 40px;
		background-color: red;
	}

	.home .div1 .aside2 button {
		width: 100px;
		height: 40px;
		color: white;
		background-color: red;
		border: none;
		border-radius: 4px;
	}

	.home .div1 .aside2 button:hover {
		cursor: pointer;
	}

	.home .div2 {
		width: 100%;
		margin: 0 auto;
		margin-top: 18px;
		display: flex;
		align-items: center;
	}

	.home .div2 .d1 {
		width: 19vw;
		height: 35px;
		background-color: #decbb8;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.home .div2 .d1 h3 {
		color: white;
		text-align: center;
		line-height: 35px;
	}

	.home .div2 .d2 {
		width: 14vw;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 45vw;
		color: white;
		background-color: #decbb8;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.home hr {
		width: 100%;
		border: 2px solid #decbb8;
		position: relative;
		bottom: 7.7px;
	}

	.home .div3 {
		width: 100%;
		height: 45vh;
		margin: 0 auto;
		display: flex;
		position: relative;
		bottom: 10px;
		box-shadow: 0 0 0 1px #dcdcdc;
	}

	.home .div3 .classify {
		width: 22%;
		height: 100%;
		overflow-y: scroll;
	}

	.home .div3 .classify::-webkit-scrollbar {
		display: none;
	}

	.home .div3 .classify ul {
		padding: 0;
		margin: 0;
	}

	.home .div3 .classify ul li {
		width: 100%;
		height: 36px;
		line-height: 36px;
		font-size: 16px;
		padding-left: 10px;
		overflow: hidden;
		text-wrap: wrap;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home .div3 .classify ul li i {
		padding-right: 20px;
	}

	.home .div3 .classify ul li:hover {
		background-color: #eedbc8;
		font-weight: 700;
	}

	.home .div3 .classify ul li:hover .classify-box {
		display: block;
	}

	.home .div3 .classify .classify-box {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 21%;
		border: 1px solid #e0e0e0;
		border-left: none;
		background-color: #fafafa;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.18);
		z-index: 10;
		display: none;
	}

	.home .div3 .classify .classify-box ul {
		width: 100%;
	}

	.home .div3 .classify .classify-box ul li {
		width: 140px;
		height: 32px;
		line-height: 32px;
		float: left;
		margin-left: 12px;
		padding: 10px 0px 10px 10px;
		border-bottom: 1px solid #c8c8c8;
	}

	.home .div3 .classify .classify-box ul li span {
		font-size: 14px;
		font-weight: normal;
	}

	.home .div3 .classify .classify-box ul li:hover {
		color: #f56c6c;
		background-color: white;
	}

	.home .div3 .banner {
		width: 52%;
		height: 100%;
		background-color: #b9b9b9;
	}

	.home .div3 .banner img {
		width: 100%;
		height: 100%;
	}

	.home .div3 .hot {
		width: 30%;
		height: 100%;
		margin-left: 10px;
		overflow: hidden;
	}

	.home .div3 .hot a {
		color: black;
	}

	.home .div3 .hot .aside1 {
		width: 98%;
		margin: 0 auto;
		display: flex;
		margin-top: 8px;
	}

	.home .div3 .hot .aside1 p {
		width: 15vw;
		margin-left: 10px;
		overflow: hidden;
		text-wrap: nowrap;
		text-overflow: ellipsis;
	}

	.home .div3 .hot .aside1 p:hover {
		color: red;
	}

	.home .div3 .hot .aside1 span {
		font-weight: bold;
	}

	.home .div3 .hot .aside1 img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.home .div3 .hot .aside2 {
		width: 68%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: relative;
		bottom: 20px;
		left: 5px;
	}

	.home .div3 .hot .aside2 p {
		font-size: 14px;
	}

	.home .div3 .hot .aside2 span {
		font-size: 12px;
	}

	.home .div3 .hot .aside2 button {
		width: 30px;
		height: 25px;
		color: white;
		font-weight: bold;
		border: none;
		border-radius: 4px;
		background-color: #f56c6c;
	}

	.announ {
		width: 80%;
		margin: 18px auto;
		height: 15px;
		padding: 12px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		border: 1px solid #dcdcdc;
		border-radius: 8px;
	}

	.announ .icon {
		color: red;
		display: flex;
		align-items: center;
	}

	.announ .icon i {
		font-size: 18px;
		margin-right: 5px;
	}

	.announ .text {
		width: 80%;
		overflow: hidden;
	}

	.announ .text span {
		display: block;
		white-space: nowrap;
		padding-left: 100%;
		padding-right: 100%;
		animation: announ 12s linear infinite;
	}

	@keyframes announ {
		0% {
			transform: translate(0);
		}

		100% {
			transform: translate(-100%);
		}
	}

	.announ .text span:hover {
		animation-play-state: paused;
		/* 当鼠标移动到该span标签滚动动画会暂停 */
	}

	.home .div4 {
		width: 100%;
		margin: 0 auto;
		margin-top: 12px;
		display: flex;
	}

	.home .div4 .d2 {
		width: 19vw;
		height: 35px;
		background-color: #decbb8;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.home .div4 .d2 h3 {
		color: white;
		text-align: center;
		line-height: 35px;
	}

	.home .newlist {
		width: 100%;
	}

	.home .newlist ul {
		width: 98%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		/* 换行 */
		flex-wrap: wrap;
	}

	.home .newlist ul li {
		width: 17%;
		overflow: hidden;
		text-align: center;
		position: relative;
		padding: 8px;
		margin-top: 20px;
		margin-left: 18px;
		margin-bottom: 15px;
		border: 1px solid #d8c6b4;
	}

	.home .newlist ul li a {
		color: black;
	}

	.home .newlist ul li:hover {
		box-shadow: 0px 0px 10px #c3c3c3;
		border-color: #fafafa;
	}

	.home .newlist ul li .img {
		width: 10vw;
		height: 22vh;
		margin: 10px auto;
	}

	.home .newlist ul li img {
		width: 100%;
		height: 100%;
	}

	.home .newlist ul li p {
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		margin-top: 10px;
		overflow: hidden;
		text-wrap: nowrap;
		text-overflow: ellipsis;
	}

	.home .newlist ul li aside {
		width: 80%;
		height: 30px;
		display: flex;
		justify-content: center;
		margin-left: 15px;
		padding-bottom: 15px;
	}

	.home .newlist ul li aside p {
		color: red;
		font-family: 隶书;
		font-size: 20px;
	}

	.home .footer {
		width: 80%;
		margin: 0 auto;
	}

	.home .footer ul {
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.home .footer ul li {
		text-align: center;
	}

	.home .footer ul li img {
		width: 55px;
	}

	.home .footer ul li p {
		margin-top: 5px;
	}

	.home .hr3 {
		margin-top: 35px;
	}

	.upload {
		width: 40px;
		height: 40px;
		padding: 4px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		flex-direction: column;
		/* 设置为列方向 */
		background-color: #f0f0f0;
		position: fixed;
		bottom: 40px;
		right: 20px;
	}

	.upload i {
		font-size: 22px;
	}

	.upload span {
		font-size: 10px;
		margin-top: 2px;
	}

	.upload:hover {
		cursor: pointer;
		font-weight: 700;
	}
</style>